<template>
  <view class="phxx-item" @click="goToDetail(itemList)">
    <view class="phxx-item-content" :class="{ 'more-width': types == 2 }">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.vehicleNo || '' }}</view>
          <view class="cname-fu-box">
            <view class="cname-fu">
              <view class="gs">{{ itemList.supplierName || '' }}</view>
            </view>
            <view class="line"></view>
            <view class="cname-fu">
              <view class="mz" v-if="types == 1">{{
                itemList.coalSubtypeName || ''
                }}</view>
              <view class="mz" v-if="types == 2">{{
                itemList.purchaseCoalName || ''
                }}</view>
            </view>
          </view>
        </view>

        <view :class="{
            'gray-type': itemList.queueStatus == 10000,
            'orange-type':
              itemList.queueStatus == 30010 ||
              (itemList.queueStatus >= 60020 && itemList.queueStatus <= 60040),
            'blue-type':
              itemList.queueStatus == 10010 || itemList.queueStatus == 40010,
            'green-type':
              itemList.queueStatus == 90000 ||
              (itemList.queueStatus >= 40040 && itemList.queueStatus <= 60010),
            'red-type':
              itemList.queueStatus == 40020 || itemList.queueStatus == 40030,
            status: true
          }">{{ itemList.queueStatusName || '' }}</view>
      </view>
      <view class="bottom" style="margin-top: 14rpx">
        <view class="items">
          <text class="til">司机姓名</text>
          <text class="val">{{ itemList.driverName || '' }}</text>
        </view>
      </view>
      <view class="bottom" v-if="types == 2">
        <view class="items">
          <text class="til">车道</text>
          <text class="val">{{ itemList.laneName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">装货地址</text>
          <text class="val">{{ itemList.loadingSiteName || '' }}</text>
        </view>
      </view>
      <!-- <view class="bottom">
				<view class="items">
					<text class="til">卸货地址:</text>
					<text class="val">{{ itemList.loadingSiteName }}</text>
				</view>
			</view> -->
      <view class="bottom" v-if="types == 1">
        <view class="items">
          <text class="til">排号时间</text>
          <text class="val">{{ itemList.queueTime || '' }}</text>
        </view>
      </view>
      <view class="bottom" v-if="types == 1">
        <view class="items">
          <text class="til">叫号时间</text>
          <text class="val">{{ itemList.callNumberTime || '' }}</text>
        </view>
      </view>
      <view class="bottom" v-if="types == 2">
        <view class="items full">
          <text class="til">停车场排号时间</text>
          <text class="val">{{ itemList.queueTime || '' }}</text>
        </view>
      </view>
      <view class="bottom" v-if="types == 2">
        <view class="items full">
          <text class="til">停车场叫号时间</text>
          <text class="val">{{ itemList.callNumberTime || '' }}</text>
        </view>
      </view>
    </view>
    <view class="btn">
      <button v-if="
          hasPermissionNullifyZT &&
          types == 1 &&
          (itemList.queueStatus == 40010 ||
            itemList.queueStatus == 40020 ||
            itemList.queueStatus == 40040)
        " class="mini-btn" type="primary" size="mini" @click.stop="handleClick(itemList, 1)">
        作废
      </button>
      <button v-if="
          hasPermissionCallZT && types == 1 && itemList.queueStatus == 40010
        " class="mini-btn" type="primary" size="mini" @click.stop="handleClick(itemList, 2)">
        手动叫号
      </button>

      <button v-if="
          hasPermissionNullifyTCC &&
          types == 2 &&
          (itemList.queueStatus == 50010 ||
            itemList.queueStatus == 50020 ||
            itemList.queueStatus == 50021)
        " class="mini-btn" size="mini" @click.stop="handleClick(itemList, 3)">
        作废
      </button>
      <button v-if="
          hasPermissionSuspendTCC &&
          types == 2 &&
          (itemList.queueStatus == 50010 || itemList.queueStatus == 50020)
        " class="mini-btn" type="primary" size="mini" @click.stop="handleClick(itemList, 4)">
        挂起
      </button>
      <button v-if="
          hasPermissionCallTCC &&
          types == 2 &&
          (itemList.queueStatus == 50010 || itemList.queueStatus == 50021)
        " class="mini-btn" type="primary" size="mini" @click.stop="handleClick(itemList, 5)">
        手动叫号
      </button>
    </view>
    <!-- 手动叫号确认框 -->
    <uni-popup ref="confirmDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="否" confirmText="是" :title="titleName" content="您确认手动叫号该车辆的排号信息吗？"
        @confirm="dialogConfirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name: 'row-number',
    props: {
      types: {
        type: Number,
        default: 1
      },
      itemList: {
        type: Object,
        default: {
          vehicleNo: '',
          driverName: '',
          queueStatusName: '',
          customerName: '',
          coalSubtypeName: '',
          loadingSiteName: '',
          queueTime: '',
          callNumberTime: ''
        }
      },
      hasPermissionNullifyZT: false,
      hasPermissionNullifyTCC: false,
      hasPermissionCallZT: false,
      hasPermissionSuspendTCC: false,
      hasPermissionCallTCC: false,
      authriotyFlagVoilation: {
        type: Boolean,
        default: false
      },
      authriotyFlagBlck: {
        type: Boolean,
        default: false
      },
      authriotyFlagupd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        itemTemp: null,
        typeTemp: null
      };
    },
    onShow() { },
    methods: {
      handleClick(item, type) {
        this.itemTemp = item;
        this.typeTemp = type;
        if (type == 5 || type == 2) {
          this.$refs['confirmDialog'].open();
        } else {
          this.$emit('manualCalling', item, type);
        }
      },
      dialogConfirm(res) {
        this.$emit('manualCalling', this.itemTemp, this.typeTemp);
        this.$refs['confirmDialog'].close();
      },
      goToDetail(item) {
        wx.navigateTo({ url: '/pages/lineup/index?waybillNo=' + item.waybillNo });
      }
    }
  };
</script>

<style lang="scss" scoped></style>